
<template>
  <div id="settings-div">
    <el-drawer
      title="主题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :show-close="false"
      :with-header="false"
      :modal="false"
      :append-to-body="false"
      size="70"
      style="margin-top: 51px;"
    >
      <div>
        <div class="theme-color light" @click="setTheme('light')"></div>
        <div class="theme-color dark" @click="setTheme('dark')"></div>
        <div class="theme-color blue" @click="setTheme('blue')"></div>
        <div class="theme-color red" @click="setTheme('red')"></div>
        <!-- <div class="theme-color"></div>
        <div class="theme-color"></div>-->
      </div>
    </el-drawer>
  </div>
</template>


<script>
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl"
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    setCookie: function(name, value) {
      if (value == null) {
        value = "";
      }

      var expiredays = 365;
      var exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);

      var cookie =
        name +
        "=" +
        escape(value) +
        "; path=/; expires=" +
        exdate.toGMTString();
      document.cookie = cookie;
    },
    setTheme: function(val) {
      this.setCookie("COOKIE_THEME", val);
      this.$emit("on_theme_changed");
      this.theme = val;
    }
  }
};
</script>
<style scoped>
.theme-color {
  border-radius: 20px;
  margin: 40px 15px;
  width: 40px;
  height: 80px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.theme-color:hover {
  animation: shakeTopx 2.2s infinite ease-in-out;
}
.light {
  background-color: #323639; /* 不支持线性的时候显示 */
  background-image: linear-gradient(45deg, #ffffff 50%, #323639 50%);
}
.dark {
  background-color: #323639; /* 不支持线性的时候显示 */
  background-image: linear-gradient(
    45deg,
    #21213b 50%,
    #2a2a45 30%,
    #33324e 20%
  );
}
.blue {
  background-color: #1e79d8; /* 不支持线性的时候显示 */
  background-image: linear-gradient(45deg, #ffffff 50%, #1e79d8 50%);
}
.red {
  background-color: #c62f2f; /* 不支持线性的时候显示 */
  background-image: linear-gradient(45deg, #ffffff 50%,  #c62f2f 50%);
}
@keyframes shakeTopx {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
  }
  5% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  10%,
  20%,
  30% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  15%,
  25%,
  35% {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  40% {
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  45% {
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
</style>
<style >
#settings-div .el-drawer {
  background-color: #ebeef5 !important;
  /* background-image: linear-gradient(to right, #fff, #fff, #fff) !important; */
  border-radius: 50px 0px 0px 50px;
  padding: 20px 0px;
}
</style>